<template>
	<view class="container" style="height: 100vh;background-color: white;">
		<uni-popup ref="popup" type="center" :animation="true" :mask-click="false" style="width: 100%;height: 100%;">
			<view>
				<view style="font-size: 28px; position: relative;top:-10rpx;left: 90vw;" @click="close">x</view>
				<img :src="imgurl" alt="" style="width: 95vw;height: 195rpx;">
			</view>
		</uni-popup>
		<st-navigation class="st-navigation" ref="myElement" @computedSize='computedSize'>
			<view slot="content" style="padding: 8rpx  0 16rpx 0">
				<view class="search">
					<view class="">
						<view class="city"
							style="display: flex;flex-wrap: nowrap;align-items: center; gap: 8rpx;width: 120rpx;">
							<text style="color: #333333;font-size: 28rpx;font-weight: 600;">上海</text>
							<image style="width: 20rpx;height: 10.67rpx;" src="/static/images/ysmHome/Rectangle.png"
								mode=""></image>
						</view>
					</view>
					<view class="input">
						<input type="text" placeholder="设计师姓名" confirm-type="search" v-model="searchValue"
							@confirm="handleSearch">
						<uni-icons type="search" color="#CECED9" size="20" @click="handleSearch"></uni-icons>
					</view>

				</view>
			</view>
		</st-navigation>
		<!-- <u-sticky  offsetTop='20' customNavHeight='20'> -->
		<view class="header1" style="background-color: white;position: fixed;z-index: 999;"
			:style="'top:'+ navBH+'px;'">
			<view class="" style="padding:16rpx 62rpx 0 62rpx;width: 100vw;display: flex;align-items: center;gap:72rpx">
				<view class="meusItem" :class="index===activeIndex?'activeMeusItem':''"
					style="flex:1;text-align: center;" :key="index" v-for="(item,index) in menusList"
					@click='selctNavBar(index,item)'>
					<text style="width: fit-content;white-space:nowrap;">{{item.label}}</text>
				</view>
			</view>
			
		</view>
		<!-- </u-sticky> -->
		<view class="" style="height: 66rpx;">
		</view>
		
		<view class="main" style="">
			<!-- 	<u-gap height="8" bgColor="#F4F4F4"></u-gap> -->
			<ysmHomepage ref="homepage" :mainHeight='mainHeight' v-show="currentPage==='ysmHomepage'"></ysmHomepage>
			<ysmVideoMapping :mainHeight='mainHeight' ref="childComponent" v-show="currentPage==='ysmVideoMapping'">
			</ysmVideoMapping>
			<siteLive :mainHeight='mainHeight' :dataSource='this.designerList' v-show="currentPage==='siteLive'"></siteLive>
			<ysmPublicWelfare :mainHeight='mainHeight' v-show="currentPage==='ysmPublicWelfare'"></ysmPublicWelfare>
			<ysmSalesPromotion :mainHeight='mainHeight' v-show="currentPage==='ysmSalesPromotion'"></ysmSalesPromotion>
		</view>
		<!-- <uni-load-more :status="status" :content-text="contentText" v-if="designerList.length > 0" /> -->

		<!-- <view class="" style="padding-bottom:env(safe-area-inset-bottom)">
			
		</view> -->
		<view class="bottom-view" style="height: 50px;padding-bottom:env(safe-area-inset-bottom);">

		</view>

		<view class="d-flex position-fixed bottom-0 left-0 right-0 bg-white "
			style="padding-bottom:env(safe-area-inset-bottom);z-index: 999;">
			<view class="flex-1 text-center" @click="selectTab(index)"
				style="height: 50px;line-height: 50px;font-size: 36rpx;color: #B3B3B3;"
				v-for="(item,index) in tabbarList" :key="index">
				<text :class="activeTabIndex===index?'active':''" style="">{{item.label}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	import StEmpty from '@/components/st-empty/st-empty.vue';
	import StAvatar from '../../components/st-avatar/st-avatar.vue';
	import tuiSticky from "@/components/thorui/tui-sticky/tui-sticky.vue"
	import ysmVideoMapping from '@/components/ysmVideoMapping/ysmVideoMapping.vue'
	import siteLive from '@/components/siteLive.vue'
	import ysmPublicWelfare from '@/components/ysmPublicWelfare.vue'
	import ysmSalesPromotion from '@/components/ysmSalesPromotion.vue'
	import ysmHomepage from '@/components/ysmHomepage.vue';
	// /pagesYSM/ysmDesignerShop/ysmVideoMapping
	export default {
		mounted() {
			this.setMainHeight()
			// let systemInfo = wx.getSystemInfoSync();
			// let rect = wx.getMenuButtonBoundingClientRect();
			// this.totalH = systemInfo.statusBarHeight + rect.height;

			let systemInfo = wx.getSystemInfoSync();
			let rect = wx.getMenuButtonBoundingClientRect();
			let pxToRpxScale = 750 / systemInfo.screenWidth; // 计算 px 到 rpx 的比例			
			let totalHeightPx = systemInfo.statusBarHeight + rect.height; // 总高度，单位 px
			this.totalH = totalHeightPx * pxToRpxScale; // 转换成 rpx

			console.log('this.totalH', this.totalH); // 输出状态栏和胶囊按钮的总高度，单位 rpx
		},
		config: {
			tabBar: false
		},
		components: {
			StEmpty,
			StAvatar,
			tuiSticky,
			ysmVideoMapping,
			siteLive,
			ysmPublicWelfare,
			ysmSalesPromotion,
			ysmHomepage
		},
		data() {
			return {
				navBH: 0,
				totalH: 0,
				headerHeight: 0,
				stickyHeight: 0,
				tabBarHeight: 0,
				mainHeight: 0,
				currentPage: 'ysmHomepage',
				activeIndex: 0,
				activeTabIndex: 0,
				tabbarList: [{
					label: '首页',

				}, {
					label: '消息',
				}, {
					label: '我'
				}],
				menusList: [{
					label: '团队',
					key: 'ysmHomepage'
				}, {
					label: '案例',
					key: 'ysmVideoMapping'
				}, {
					label: '工地',
					key: 'siteLive'
				}, {
					label: '公益',
					key: 'ysmPublicWelfare'
				}, {
					label: '活动',
					key: 'ysmSalesPromotion'
				}],
				imgurl: '',
				scrollTop: 0,
				stickyTop: uni.upx2px(110),
				stickyHeight: '80rpx',

				swiperDotIndex: 0,
				bannerList: [],

				searchValue: '',
				sort: 'smart',

				// smart 智能排序 
				// comments 好评优先  
				// service_num 产值优先 
				// work_salary_asc 设计费低价
				// work_salary_desc 设计费高价
				typeOptions: [{
						name: '智能排序',
						value: 'smart'
					},
					{
						name: '预约量优先',
						value: 'numberOfAppointments'
					},
					{
						name: '好评优先',
						value: 'comments'
					},
					{
						name: '产值排序',
						value: 'service_num'
					},
					{
						name: '设计费低价',
						value: 'work_salary_asc'
					},
					{
						name: '设计费高价',
						value: 'work_salary_desc'
					},
				],
				menuList: [{
						icon: '../../static/images/ysmHome/menu-1.png',
						name: '实景案例',
						path: '/pagesYSM/ysmDesignerShop/ysmVideoMapping',
					},
					{
						icon: '../../static/images/ysmHome/menu-2.png',
						name: '在线工地',
						path: '/pagesYSM/ysmDesignerShop/siteLive',
					},
					{
						icon: '../../static/images/ysmHome/menu-3.png',
						name: '社会公益',
						path: '/pagesYSM/ysmDesignerShop/ysmPublicWelfare'
					},
					{
						icon: '../../static/images/ysmHome/menu-4.png',
						name: '促销活动',
						path: '/pagesYSM/ysmSalesPromotion/ysmSalesPromotion'
					},
				],
				designerList: [ 
				],

				scrollStype: false, //滚动状态
				Opacity: 0,
				reload: false, //判断是否上拉
				page: 1,
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '', // 没有更多数据了
				},
			}
		},
		computed: {
			sortOptions() {
				return this.typeOptions.map((item) => {
					return {
						label: item.name,
						text: item.name,
						value: item.value
					}
				});
			},
			sortInfo() {
				return this.typeOptions.find((item) => item.value === this.sort);
			}
		},

		onLoad() {

			// #ifdef H5
			this.stickyTop += 44;
			// #endif

			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			let navBarHeight = menuButtonInfo.top + menuButtonInfo.height + 30;
			let top = menuButtonInfo.top + (menuButtonInfo.height - 32) / 2;
			this.stickyHeight = `${navBarHeight}rpx`;
			console.log('this.stickyHeight', this.stickyHeight)
			this.stickyTop = uni.upx2px(navBarHeight + top + 20);

			this.loadData();
			this.queryBannerList();
		},
		// 监听上拉
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.loadData();
		},
		onReady() {

		},
		onShow() {
			uni.hideTabBar()
			console.log("onShow");
			this.$refs.childComponent.updateComponent();
			this.$nextTick(() => {
				// 这里的代码会在DOM更新后执行
				// console.log(this.$refs.childComponent.$el.innerHTML);
			});
			//this.loadData();
			// this.setMainHeight()
		},
		// 下拉刷新
		onReachBottom() {
			if (this.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.page = this.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			computedSize({
				navBarHeight,
				windowWidth,
				top
			}) {
				console.log('navBarHeight,windowWidth,top', navBarHeight, windowWidth, top)
				this.navBH = navBarHeight
			},
			setMainHeight() {
				let self = this;
				let systemInfo = uni.getSystemInfoSync(); //获取设备的信息			
				let safeBottom = systemInfo.screenHeight - systemInfo.safeArea.bottom;
				this.mainHeight = this.navBH + 33 + safeBottom + 50
			},

			// getElementHeight() {
			// 	uni.createSelectorQuery().select('.header').boundingClientRect(data => {
			// 		this.headerHeight = data.height;
			// 	}).exec();

			// 	uni.createSelectorQuery().select('.u-sticky').boundingClientRect(data => {
			// 		this.stickyHeight = data.height;
			// 	}).exec();

			// 	uni.createSelectorQuery().select('.bottom-view').boundingClientRect(data => {
			// 		this.tabBarHeight = data.height;
			// 	}).exec();

			// 	uni.createSelectorQuery().select('.main').boundingClientRect(data => {
			// 		// let viewportHeight = uni.upx2px(uni.getSystemInfoSync().windowHeight);
			// 		this.mainHeight =  this.headerHeight+ this.stickyHeight + this.tabBarHeight;
			// 	}).exec();
			// },
			selctNavBar(index, item) {
				this.activeIndex = index
				this.currentPage = item.key
				console.log(this.currentPage)
			},
			selectTab(index) {
				// this.activeTabIndex = index
				switch (index) {
					case 0:
						uni.switchTab({
							url: '/pages/ysmHome/ysmHome'
						})
						break;
					case 1:
						uni.switchTab({
							url: '/pages/lineMe/lineMe'
						})
						break;
					case 2:
						uni.switchTab({
							url: '/pages/ysmMy/ysmMy'
						})
						break;
				}
			},
			upImg(img) {
				this.imgurl = img
				this.$refs.popup.open('top')
			},
			// open() {

			// },
			close() {
				this.$refs.popup.close()
			},
			bindFilterPickerChange(e) {
				let value = e;
				this.sort = value;
				this.designerList = [];
				this.loadData();
			},
			handleSearch() {
				// searchValue
				this.designerList = [];
				this.$refs.homepage.refreshData(this.searchValue);
				this.$nextTick(() => {
					// 这里的代码会在DOM更新后执行
					console.log(this.$refs.homepage.$el.innerHTML);
				});
				//this.loadData();
				// uni.navigateTo({
				// 	url: '/pagesYSM/ysmSearch/ysmSearch'
				// })
			},
			loadData() {
				let params = {
					sort: this.sort,
					// order: 'asc',
					page: this.page,
				}
				if (this.searchValue) {
					params.search = this.searchValue
				}
				this.$api.get({
					url: '/wanlshop/user/getDesignerList',
					data: params,
					success: res => {
						uni.stopPullDownRefresh();
						this.status = 'more';
						uni.setStorageSync('dataSource',encodeURIComponent(JSON.stringify(res.data))); 
						this.designerList = this.reload ? this.designerList.concat(res
							.data) : res.data; //数据 追加
						this.page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
					},
				});
			},
			handleToShop(item) {
				uni.navigateTo({
					url: `/pagesYSM/ysmDesignerShop/ysmDesignerShop?shop_id=${item.id}`
				})
			},
			handleSalesPromotion(item) {
				// activityDetail=%7B%22id%22%3A4%2C%22title%22%3A%22%E8%AE%BE%E8%AE%A1%E4%BC%98%E6%83%A0%E4%B8%AD%22%2C%22desc%22%3A%22%3Cp%3E%3Cimg%20src%3D%5C%22https%3A%2F%2Fwww.ysmll.cn%2Fuploads%2F20230518%2Fd7c50dee084e6abf577755036b13b917.jpg%5C%22%20style%3D%5C%22width%3A%2050%25%3B%5C%22%20data-filename%3D%5C%22filename%5C%22%3E%3Cbr%3E%3C%2Fp%3E%22%2C%22createtime%22%3A1684385073%2C%22img%22%3A%22https%3A%2F%2Fwww.ysmll.cn%2Fuploads%2F20230518%2Fa6d4524dc3ed988133c8820d1e371247.jpg%22%2C%22updatetime%22%3A1684385073%2C%22starttime%22%3A1684252800%2C%22endtime%22%3A1685462400%2C%22status%22%3A0%2C%22user_id%22%3A9%2C%22shop_id%22%3A5%2C%22timeStr%22%3A%2211%E5%A4%A9%2014%3A30%3A39%22%7D
				let activityDetail = encodeURIComponent(JSON.stringify(item.activity_detail));
				uni.navigateTo({
					url: `/pagesYSM/ysmSalesPromotion/ysmSalesPromotionDetail?activityDetail=${activityDetail}`
				})
			},
			handleToYsmSalesPromotion(menu) {
				if (menu.path) {
					uni.navigateTo({
						url: menu.path,
					})
				}
			},

			// https://www.ysmll.cn/api/wanlshop/banner/lists
			queryBannerList() {
				this.$api.get({
					url: '/wanlshop/banner/lists',
					data: {},
					success: res => {
						this.bannerList = res.data;
					}
				})
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// console.log(e.scrollTop)
		}
	}
</script>

<style lang="less">
	.active {
		color: #333333;
		font-weight: bold;
	}

	/deep/.uni-popup {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.meusItem {
		height: 50rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		line-height: 35rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.activeMeusItem {
		border-bottom: 4rpx solid #D62C15;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #D62C15;
		line-height: 35rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.tag {
		background: #759AE1;
		color: #fff;
		padding: 2rpx 16rpx 2rpx 0rpx;
		font-weight: 400;
		font-size: 20rpx;
		line-height: 27rpx;
		position: relative;
		// min-width: 70rpx;
		text-align: center;
		margin-left: 30rpx;

		&::after {
			content: '';
			width: 0;
			height: 0;
			// background: #759AE1;
			position: absolute;
			right: -2rpx;
			top: 50%;
			transform: translateY(-50%);
			border: 20rpx solid transparent;
			border-right-color: #fff;
		}
	}

	.main {
		.header {
			// padding-top: 10rpx;
			background-color: #fff;
		}
	}

	.search {
		display: flex;
		align-items: center;
		background: #F6F7FB;
		border-radius: 80rpx;
		height: 60rpx;
		padding: 0 32rpx;
		width: 500rpx;

		.city {
			// margin-right: 20rpx;
			// padding-right: 60rpx;
			margin-right: 40rpx;
			padding-right: 20rpx;

			font-size: 28rpx;
			color: #333;
			border-right: 1rpx solid #E6E6E6;
			font-weight: 500;
			position: relative;

			// &::after {
			// 	content: '';
			// 	width: 0;
			// 	height: 0;
			// 	position: absolute;
			// 	right: 20rpx;
			// 	top: 60%;
			// 	transform: translateY(-50%);
			// 	border: 12rpx solid transparent;
			// 	border-top-color: #333;
			// }
		}

		.input {
			font-weight: 400;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.banner {

		height: 195rpx;

		.swiper-box {

			height: 100%;
			// padding: 0 20rpx;
			padding-bottom: 10rpx;

			.swiper-item {
				width: 95%;
				margin: 0 auto;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;
				color: #fff;
			}

			/deep/ .wx-swiper-dots-horizontal {
				bottom: 10rpx !important;
			}

			/deep/ .wx-swiper-dot {
				// 指示点元素默认样式
				background-color: white;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
			}

		}

		image {
			border-radius: 20rpx;
			height: 100%;
			width: 100%;
			z-index: 999;
		}
	}

	.menus {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		border-bottom: 1rpx solid #E7E7E7;
		box-sizing: content-box;
		background-color: rgba(247, 247, 247);
		padding-top: 12rpx;


		.menus-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30rpx 0 20rpx 0;
			background-color: #fff;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			text {
				font-size: 26rpx;
				color: #333;
				margin-top: 20rpx;
			}

			&:not(:nth-child(4n)) {
				border-right: 1rpx solid #E7E7E7;
				box-sizing: content-box;
			}
		}
	}

	.tui-sticky-fixed {
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	}

	.filter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		height: 90rpx;
		background-color: #fff;

		.filter-label {
			font-weight: 600;
			font-size: 32rpx;
			line-height: 32rpx;
			color: #333333;

		}

		.filter-item {
			font-weight: 500;
			font-size: 24rpx;
			line-height: 32rpx;
			color: #808080;

			/* text {
			padding: 4rpx 28rpx 4rpx 12rpx;
			background: #F6F6F6;
			border-radius: 4px;

			position: relative;

			&::after {
				content: '';
				width: 0;
				height: 0;
				position: absolute;
				right: 5rpx;
				top: 60%;
				transform: translateY(-50%);
				border: 8rpx solid transparent;
				border-top-color: #D9D9D9;
			}
		} */
			/deep/ .uni-select {
				border: none !important;
				font-weight: 500;
				font-size: 24rpx;
				line-height: 24rpx;
				// background: #F6F6F6;
				height: 50rpx !important;
				// width: 160rpx !important;

				.uni-select__input-text {
					color: #808080 !important;
				}

				.uni-select__selector-item {
					font-size: 20rpx;
				}
			}

		}
	}

	.designer-list {
		padding-bottom: 40rpx;

		.designer-item {
			margin-top: 16rpx;
			background-color: #fff;
			padding: 16rpx 48rpx;
		}

		.designer-item-info {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			.designer-avatar {
				width: 140rpx;
				height: 140rpx;

				.designer_level {
					height: 42rpx;
				}
			}

			.designer-info {
				width: calc(100% - 140rpx);
				padding-left: 32rpx;
				display: flex;

				.left {
					width: calc(100% - 208rpx);
				}

				.right {
					width: 208rpx;
					text-align: center;
					border-left: 1px dashed #818181;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.label {
						font-weight: 400;
						font-size: 24rpx;
						line-height: 30rpx;
						color: #818181;
					}

					.number {
						font-weight: 600;
						font-size: 44rpx;
						line-height: 48rpx;
						color: #1D76C6;
					}

					.link {
						font-weight: 400;
						font-size: 26rpx;
						line-height: 34rpx;
						color: #1D76C6;
						margin-top: 12rpx;
						padding-left: 26rpx;
					}
				}

				.designer-name {
					font-weight: 600;
					font-size: 32rpx;
					line-height: 40rpx;
					color: #333333;
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					text {
						max-width: 75px;
					}

					.designer-online {
						font-weight: 400;
						font-size: 20rpx;
						line-height: 28rpx;
						color: #818181;
						background: #E7E7E7;
						border-radius: 4px;
						padding: 2rpx 8rpx;
						margin-left: 16rpx;
						position: relative;
						white-space: nowrap;

						&::before {
							content: '';
							display: inline-block;
							width: 16rpx;
							height: 16rpx;
							background: #818181;
							border-radius: 50%;
							margin-right: 8rpx;
						}

						&.online {
							background: #E0FAD9;
							color: #76BD53;

							&::before {
								background: #6BC54A;
							}
						}
					}
				}

				.designer-desc {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 30rpx;
					color: #818181;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					// margin-top: 10rpx;
					margin-bottom: 5rpx;

					.designer-desc-item {
						font-size: 24rpx;
						margin-top: 10rpx;
					}

					.designer-desc-item:nth-child(2) {
						margin-top: 15rpx;
					}
				}
			}
		}

		.designer-speciality {
			// margin-top: 5rpx;
			display: flex;
			align-items: center;


			.label {
				margin-right: 18rpx;
				color: #fff;
				width: 70rpx;
			}

			.designer-speciality-item {
				width: calc(100% - 340rpx);
				font-size: 24rpx;
			}
		}

		.designer-activity {
			border-top: 1rpx dashed #aaaaaa;

			margin-top: 8rpx;
			padding-top: 8rpx;
			display: flex;
			align-items: center;

			.label {
				margin-right: 18rpx;
				color: #fff;
				width: 118rpx;


				&.tag {
					background: #FD9A00;
				}
			}

			.designer-activity-item {
				font-size: 24rpx;
				width: calc(100% - 120rpx);
			}
		}

		.comment {
			width: 208rpx;
			font-size: 24rpx;
			color: #818181;
			padding-left: 75rpx;
		}

		.designer-speciality-item,
		.designer-activity-item {
			font-weight: 400;
			font-size: 26rpx;
			line-height: 34rpx;
			color: #333333;
			// 超出一行...
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>